import React from 'react';
import {View, Button} from 'react-native';
import {RouteProp, NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  StackNavigationProp,
  TransitionPresets,
} from '@react-navigation/stack';

// ---- 页面参数类型 ----
type RootStackParamList = {
  Home: undefined;
  Detail: undefined;
};

type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
type DetailScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Detail'
>;
type HomeScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;
type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>;

// ---- 示例页面 ----
interface HomeProps {
  navigation: HomeScreenNavigationProp;
  route: HomeScreenRouteProp;
}
function HomeScreen({navigation}: HomeProps) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button
        title="Go to Detail"
        onPress={() => navigation.navigate('Detail')}
      />
    </View>
  );
}

interface DetailProps {
  navigation: DetailScreenNavigationProp;
  route: DetailScreenRouteProp;
}
function DetailScreen({navigation}: DetailProps) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

// ---- Stack ----
const Stack = createStackNavigator<RootStackParamList>();

// ---- 最小 Navigator Demo ----
export default function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          ...TransitionPresets.SlideFromRightIOS,
          gestureDirection: 'horizontal',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
